import React, { useState, useMemo } from 'react';

// function SubData() {
//   const [count, setCount] = useState(1);
//   const [val, setValue] = useState('');

//   const countIsChange = useMemo(() => {
//     console.log('compute,useMemoSubData组件更新执行了');
//     let bigCount = count*100;
//     return bigCount;
//   }, [count]);

//   return (
//     <div>
//       <h4>
//         {count}-{val}-{countIsChange}
//       </h4>
//       <div>
//         <button onClick={() => setCount(count + 1)}>+c1</button>
//         <input value={val} onChange={(event) => setValue(event.target.value)} />
//       </div>
//     </div>
//   );
// }
// export default React.memo(SubData);

function SubData() {
  //任务2 使用useMemo缓存单个数据,并监视
  console.log('memo更新了');
  const [count, setCount] = useState(10);
  const [val, setVal] = useState('');
  const countIsChange = useMemo(() => {
    console.log('本数据count不想也不需要更新', count);
    console.log(count, 'count有变化要更新');
  }, [count]);
  return (
    <div>
      SubData
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count * 10);
        }}
      >
        *10
      </button>
      <input
        type="text"
        onChange={(e) => {
          setVal(e.target.value);
        }}
        value={val}
      />
      {/* 这个input变化跟其他组件或本组件的其他内容没关系,无需重新更新 */}
    </div>
  );
}

export default React.memo(SubData);
